.el-input,
.el-textarea {
  --el-input-text-color: var(--text-content-darkest);
  --el-input-bg-color: var(--surface-neutral-primary-rest);
  --el-input-border-color: var(--stroke-border-neutral-rest);
  --el-input-focus-border: var(--stroke-border-neutral-rest);
  --el-input-focus-border-color: var(--stroke-border-neutral-rest);
  --el-input-hover-border-color: var(--stroke-border-neutral-hover);
  --el-disabled-text-color: var(--text-cta-disabled);
  --el-disabled-bg-color: var(--surface-neutral-secondary-rest);
  --el-disabled-border-color: var(--stroke-border-neutral-rest);
  --el-select-disabled-border: var(--stroke-border-neutral-rest);
}

.el-input {
  --input-size-large: 48px;
  --input-size-medium: 44px;
  --input-size-small: 36px;
  --el-input-height: var(--input-size-medium);
  font-size: 14px;

  .el-input__icon {
    font-size: 16px;
  }

  &.is-disabled {
    .el-input__prefix {
      color: var(--text-cta-disabled);
    }

    .el-input__suffix {
      color: var(--text-cta-disabled);
    }
  }
}

.el-input__wrapper {
  border-radius: 8px;

  &.is-focus {
    outline: 2px solid var(--stroke-border-cta-focused);
    outline-offset: 1px;
  }
}

.el-input__prefix {
  color: var(--text-content-medium);
}

.el-input__suffix {
  color: var(--text-content-dark);
}

.el-input--small {
  --el-input-height: var(--input-size-small);
  font-size: 14px;

  .el-input__icon {
    font-size: 16px;
  }
}

.el-input--large {
  --el-input-height: var(--input-size-large);
  font-size: 16px;

  .el-input__icon {
    font-size: 20px;
  }

  .el-input__wrapper {
    padding: 1px 11px;
  }
}

.el-textarea__inner {
  padding: 7px 11px;
  border-radius: 8px;

  &:focus {
    outline: 2px solid var(--stroke-border-cta-focused);
    outline-offset: 1px;
  }
}

/* input group */
.el-input-group {
  .el-input__wrapper {
    &.is-focus {
      z-index: 1;
    }
  }

  &.input-append-button {
    .el-input-group__append {
      box-shadow: none;

      button.el-button {
        margin: 0 -16px;
        background-color: var(--surface-filled-rest);
        color: var(--text-cta-achromatic);
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;

        &:hover {
          color: var(--text-cta-achromatic);
          background-color: var(--surface-filled-hover);
        }

        &:active {
          background-color: var(--surface-filled-pressed);
        }

        &:disabled {
          color: var(--text-cta-disabled);
          background-color: var(--surface-filled-disabled);
        }
      }
    }
  }
}

.el-input-group__prepend,
.el-input-group__append {
  padding: 0 16px;
  border-radius: 8px;
}

.el-input-group__prepend {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.el-input-group__append {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* cascader */
.el-cascader__dropdown,
.el-cascader-panel {
  --el-cascader-menu-border: 1px solid var(--stroke-divider-subtle);
  --el-cascader-menu-shadow: var(--elevation-3);
  --el-cascader-node-background-hover: var(--surface-neutral-primary-hover);
}

.el-select__wrapper {
  border-radius: 8px;
}

.el-select--small .el-select__wrapper {
  min-height: 36px;
}

.el-select .el-select__wrapper {
  min-height: 44px;
}

.el-select--large .el-select__wrapper {
  min-height: 48px;
}
